<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

    <!-- 路径可能跟我不一样，需要修改 -->
    <script src="../js/vue.global.js"></script>


</head>

<body>

    <div id="app">

        <h3>注册</h3>
        <form>
            用户名：<input type="text" v-model="myForm.username" /><br>
            密码：<input type="password" v-model="myForm.password" /><br>
            确认密码：<input type="password" v-model="myForm.beginpassword" /><br>
            性别：<input type="radio" v-model="myForm.sex" value="0" />男
            <input type="radio" v-model="myForm.sex" value="1" />女<br>
            爱好：<input type="checkbox" v-model="myForm.like" value="0" />读书
            <input type="checkbox" v-model="myForm.like" value="1" />体育
            <input type="checkbox" v-model="myForm.like" value="2" />旅游<br>
            国籍：<select v-model="myForm.nationality">
                <option value="0">中国</option>
                <option value="1">美国</option>
                <option value="2">英国</option>
            </select><br>
            个人简介：<textarea v-model="myForm.brief" rows="5" cols="30"></textarea><br>
            <input type="button" value="提交" @click="handler" />
        </form>
    </div>


    <script>

        Vue.createApp({
            data() {
                return {
                    myForm: {
                        username: '',
                        password: '',
                        beginpassword: '',
                        sex: 0,
                        like: ['0', '1', '2'],
                        nationality: 0,
                        brief: ''
                    }
                }
            }, watch: {
                myForm: {
                    handler(val) {
                        console.log("val", val);
                    },
                    deep: true
                }
            }

        }).mount("#app")

    </script>




</body>

</html>